<!DOCTYPE html>

<html>

	<head>
		<title>Interactive Subdivide</title>
		<script type="text/javascript" src="libs/three.js"></script>
		<script type="text/javascript" src="libs/jquery-1.9.0.js"></script>
		<script type="text/javascript" src="libs/stats.js"></script>
		<script type="text/javascript" src="libs/dat.gui.js"></script>
		<script type="text/javascript" src="libs/SubdivisionModifier.js"></script>
		<style>
			body {
				/* set margin to 0 and overflow to hidden, to go fullscreen */
				margin: 0;
				overflow: hidden;
			}
		</style>
	</head>
	<body>

		<div id="Stats-output"></div>
		<!-- Div which will hold the Output -->
		<div id="WebGL-output"></div>

		<!-- Javascript code that runs our Three.js examples -->
		<script type="text/javascript">
			// once everything is loaded, we run our Three.js stuff.

			$(function() {
				// First we want to clone our original geometry.
				// Just in case we want to get the low poly version back.
				var smooth;

				var stats = initStats();

				// create a scene, that will hold all our elements such as objects, cameras and lights.
				var scene = new THREE.Scene();

				// create a camera, which defines where we're looking at.
				var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

				// create a render and set the size
				var webGLRenderer = new THREE.WebGLRenderer();
				webGLRenderer.setClearColorHex(0xEEEEEE, 1.0);
				webGLRenderer.setSize(window.innerWidth, window.innerHeight);
				webGLRenderer.shadowMapEnabled = true;

				// position and point the camera to the center of the scene
				camera.position.x = -15;
				camera.position.y = 10;
				camera.position.z = 25;
				camera.lookAt(new THREE.Vector3(0, 0, 0));

				// add spotlight for the shadows
				var spotLight = new THREE.SpotLight(0xffffff);
				spotLight.position.set(0, 50, 30);
				spotLight.intensity = 2;
				scene.add(spotLight);

				// add the output of the renderer to the html element
				$("#WebGL-output").append(webGLRenderer.domElement);

				// call the render function
				var step = 0;

				// setup the control gui
				var controls = new function () {
				// we need the first child, since it's a multimaterial

				}

				var gui = new dat.GUI();
				var mesh;
				var subdividedMesh;

				var loader = new THREE.JSONLoader();
				loader.load("assets/models/subdivideAudi_a01.js", function(geometry, mat) {
					geometrieNormal = geometry;
					mesh = new THREE.Mesh(geometry, mat[0]);

					scene.add(mesh);
					
					console.log(mesh);

					smooth = geometry;



					var divisions = 1;
					var modifier = new THREE.SubdivisionModifier(divisions);

					modifier.modify(smooth);

					subdividedMesh = new THREE.Mesh(smooth, new THREE.MeshPhongMaterial({
						color : 0x222222,
						wireframe : true
					}));

					scene.add(subdividedMesh);
					console.log(subdividedMesh);

				}, '../assets/models');

				/*
				// Next, we need to merge vertices to clean up any unwanted vertex.
				smooth.mergeVertices();
				*/
				// Create a new instance of the modifier and pass the number of divisions.
				// Apply the modifier to our cloned geometry.

				// Finally, add our new detailed geometry to a mesh object and add it to our scene.

				render();

				function render() {
					stats.update();

					if (subdividedMesh && mesh) {
						//mesh.position.x = 30;
						subdividedMesh.rotation.y += 0.01;
						mesh.rotation.y += 0.01;
					}

					// render using requestAnimationFrame
					requestAnimationFrame(render);
					webGLRenderer.render(scene, camera);
				}

				function initStats() {

					var stats = new Stats();
					stats.setMode(0);
					// 0: fps, 1: ms

					// Align top-left
					stats.domElement.style.position = 'absolute';
					stats.domElement.style.left = '0px';
					stats.domElement.style.top = '0px';

					$("#Stats-output").append(stats.domElement);

					return stats;
				}

			});

		</script>
	</body>
</html>